<!--
  @Descripttion:用户中心-首页
  @Author：yuzhongfeng
  @Date：2022年10月17日 21:45:40
-->
<template>
  <section class="page">
    <!-- 头部导航栏 -->
    <HeaderCom />
    <div class="content-page" id="page">
      <div
        class="left"
        id="leftMenu"
        :style="`${
          pageType === 1 ? 'left: calc((100% - 1200px) / 2 - 90px)' : ''
        }`"
        v-if="pageType === 1 || pageType === 2"
      >
        <div v-for="(item, index) in [list]" class="row" :key="index">
          <div class="title" :class="type == index ? 'active' : ''">
            <img src="../../assets/images/cultivate/menu.png" class="icon" />
            {{ item.title }}
          </div>
          <!-- pageType 1：往期活动  2：平台架构 3：培训案例 (三级，不展示菜单) -->
          <div
            class="row_li"
            v-for="(it, i) in item.list"
            :class="
              (type === 0 && pageType === 1 && i === 4) ||
              (type === 1 && pageType === 2 && i === 1) ||
              (type === 1 && pageType === 1 && i === 1)
                ? 'active'
                : ''
            "
            :key="i"
            @click="openIframe2(it)"
          >
            <img
              v-if="it.icon"
              :src="
                require(`../../assets/images/cultivate/${
                  (type === 0 && pageType === 1 && i === 4) ||
                  (type === 1 && pageType === 2 && i === 1)
                    ? it.icon + '_active'
                    : it.icon
                }.png`)
              "
              class="row_li_icon"
              :class="it.icon"
            />
            {{ it.title }}
          </div>
        </div>
      </div>
      <div class="bannerBox">
        <img
          :style="pageType == 1 ? 'background-color: rgb(24,85, 155);' : ''"
          :src="
            require(`../../assets/images/otherServices/bg_img_${pageType}.jpg`)
          "
          class="banner"
        />
      </div>
      <div class="main">
        <PreviousActivities v-if="pageType == 1" />
        <ProductService v-if="pageType == 2" />
        <EducationTraining v-if="pageType == 3" />
      </div>
      <footerMenu id="pageFooter"></footerMenu>
    </div>
  </section>
</template>

<script>
import footerMenu from "@/components/footerMenu/index.vue";
import HeaderCom from "@/components/header/index.vue";
import PreviousActivities from "./components/previousActivities.vue";
import ProductService from "./components/productService.vue";
import EducationTraining from "./components/educationTraining.vue";

export default {
  // 组件名称
  name: "otherServices",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {
    HeaderCom,
    footerMenu,
    PreviousActivities,
    ProductService,
    EducationTraining,
  },
  // 组件状态值
  data() {
    return {
      pageType: 1, // 1：往期活动  2：平台架构 3：培训案例
      title: {
        1: "往期活动",
        2: "平台架构",
        3: "教育培训",
      },
      list: [],
      menuList: [
        {
          title: "提供服务",
          list: [
            {
              title: "教育培训",
              url: "provideTraining",
              type: 1, //0:无背景图、无banner图  1：有背景图  2：有banner图 3：打开其他模块页面
              icon: "blog",
              bg_img: "provideTraining",
            },
            {
              title: "实践项目",
              url: "",
              type: 3,
              icon: "subject",
              bg_img: "",
            },
            {
              title: "研究成果",
              url: "/researchResult",
              type: 3,
              icon: "research",
              bg_img: "",
            },
            {
              title: "前沿资讯",
              url: "/newsAction",
              type: 3,
              icon: "news",
              bg_img: "",
            },
            {
              title: "海外服务",
              url: "overseaServices",
              type: 1,
              icon: "archive",
              bg_img: "overseaService",
            },
          ],
        },
        {
          title: "关于我们",
          list: [
            {
              title: "平台简介",
              url: "companyProfile",
              type: 2,
              icon: "tags1",
              banner: "companyProfile",
              bg_style: "background-color: rgb(6,74,153);",
            },
            {
              title: "往期活动",
              url: `/otherServices?type=1$random=${Math.random()}`,
              type: 3,
              icon: "post",
              bg_img: "",
            },
            // {
            //   title: "平台架构",
            //   url: `/otherServices?type=2$random=${Math.random()}`,
            //   type: 3,
            //   icon: "plaot",
            //   bg_img: "",
            // },
            {
              title: "法律声明",
              url: "legalNotices",
              icon: "tags2",
            },
            {
              title: "免责声明",
              url: "disclaimer",
              icon: "tags3",
            },
            {
              title: "隐私协议",
              url: "PrivacyPolicy",
              icon: "tags4",
            },
            {
              title: "服务协议",
              url: "ServicePolicy",
              icon: "tags5",
            },
          ],
        },
        {
          title: "联系我们",
          list: [
            {
              title: "帮助中心",
              url: "helpCenter",
              type: 1,
              icon: "question",
              bg_img: "helpCenter",
            },
            {
              title: "常见问题",
              url: "FAQ",
              type: 2,
              icon: "message",
              banner: "FAQ",
              bg_style: "background-color: #afc0dd;",
            },
            {
              title: "商务合作",
              url: "businessCooperations",
              icon: "business",
              type: 1,
              bg_img: "business",
            },
            {
              title: "加入我们",
              url: "joinUs",
              icon: "join",
              type: 2,
              banner: "joinUs",
              bg_style: "background-color: rgb(6,37,104);",
            },
          ],
        },
      ],
      type: 0, // 菜单的第几列
    };
  },
  watch: {
    $route(newVal) {
      this.init();
    },
  },
  beforeDestory() {
    let pageEl = document.getElementById("page");
    pageEl.removeEventListener("scroll", this.menuHidden);
  },
  // 组件方法
  methods: {
    init() {
      let pageEl = document.getElementById("page");
      pageEl.scrollTo(0, 0);
      pageEl.addEventListener("scroll", this.menuHidden);
      this.pageType = Number(this.$route.query?.type) || 1;
      document.title = this.title[this.pageType];
      if (this.pageType === 3) {
        this.type = 0;
      } else {
        this.type = 1;
      }
      this.list = JSON.parse(JSON.stringify(this.menuList[this.type]));
    },
    menuHidden() {
      let leftMenu = document.getElementById("leftMenu");
      let footEl = document.getElementById("pageFooter");
      if (leftMenu && footEl) {
        let cb =
          window.innerHeight -
          leftMenu.getBoundingClientRect().y -
          leftMenu.getBoundingClientRect().height;
        let footElCb = window.innerHeight - footEl.getBoundingClientRect().y;
        if (footElCb >= cb) {
          leftMenu.style = `opacity: 0;${
            this.pageType === 1 ? "left: calc((100% - 1200px) / 2 - 90px)" : ""
          }`;
        } else {
          leftMenu.style = `opacity: 1;${
            this.pageType === 1 ? "left: calc((100% - 1200px) / 2 - 90px)" : ""
          }`;
        }
      }
    },
    openIframe2(item) {
      if (item.type === 3) {
        if (item.url) {
          this.$router.push({ path: item.url });
        } else {
          this.$message.info("模块开发中，即将上线，敬请期待");
        }
        return;
      }
      let { url } = item;
      this.$router.push({
        name: "cultivate",
        query: { type: this.type + 1, url },
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.page {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .content-page {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding-top: 80px;
    min-width: 1200px;
    .bannerBox {
      width: 100%;
      position: relative;
      height: 350px;
      overflow-x: hidden;
      margin-bottom: 25px;
      .banner {
        width: 100%;
        -o-object-fit: contain;
        object-fit: contain;
        height: 350px;
        display: block;
        min-width: 1920px;
        background-color: rgb(8, 44, 110);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
      }
    }
    .left {
      width: 240px;
      position: fixed;
      left: calc((100% - 1200px) / 2 - 70px);
      top: 260px;
      box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.18);
      padding-top: 48px;
      padding-left: 20px;
      background: #fff;
      border-radius: 8px;
      transition: all 0.6s;
      opacity: 1;
      z-index: 5;
      .row {
        width: 100%;
        font-size: 15px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #37383d;
        line-height: 21px;
        // height: 52px;
        transition-duration: 0.3s;
        overflow-y: hidden;
        &:hover {
          height: auto;
          .title {
            border-bottom: 1px solid #d4d6da;
            .icon2 {
              transform: rotate(90deg);
            }
          }
        }
        .title {
          margin-bottom: 10px;
          padding-left: 40px;
          padding-bottom: 30px;
          position: relative;
          border-bottom: 1px solid #d4d6da;
          .icon {
            position: absolute;
            left: 0;
            top: 0;
            max-width: 20px;
          }
          .icon2 {
            position: absolute;
            right: 20px;
            height: 20px;
            transition-duration: 0.3s;
            top: 0;
          }
        }
        .row_li {
          width: calc(100% - 20px);
          padding-left: 44px;
          cursor: pointer;
          height: 44px;
          position: relative;
          margin-bottom: 38px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          transition-duration: 0.3s;
          .row_li_icon {
            position: absolute;
            left: 13px;
            top: 50%;
            transform: translateY(-50%);
            max-width: 20px;
            &.tags5 {
              max-width: 25px;
              left: 10px;
            }
          }
          &:hover,
          &.active {
            color: #15539a;
            background: #e1f2fd;
            font-size: 16px;
            font-weight: 600;
            // border: 1px solid #daebff;
          }
        }
      }
    }
    .main {
      width: 1200px;
      margin: 0 auto;
      padding: 23px 30px;
    }
  }
}
@media screen and (max-height: 820px) {
  .row_li {
    margin-bottom: 10px !important;
  }
  .left {
    padding-top: 20px !important;
  }
  .left .row .title {
    margin-bottom: 10px !important;
  }
}

@media screen and (max-width: 750px) {
  .page {
    .content-page {
      min-width: auto;
      overflow: overlay;
      .bannerBox {
        display: none;
      }
      .main {
        width: 100%;
        padding: 0;
      }
    }
  }
}
</style>
